<template>
    <div class="container">
        <Magnifier :imgOptions="imgOptions"/>

        <!-- <Selector
            :placeholder="'请选择框架'" 
            :menuData="menuData"
        /> -->
    </div>
</template>

<script>
    import menuData from './data/selector.js'
    import { reactive, toRefs } from 'vue'
    export default {
        name: 'App',
        setup() {
            const state = reactive({
                imgOptions:{
                    imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F04%2F20180804180738_oycmo.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645424864&t=59b0991ee805876c49b8eb23a5ddaae9',
                    imgAlt:'斐智秀',
                    blank:true,
                    link:'https://www.baidu.com',
                    imgWidth:200,    // ( 源图片： 800*1199 )
                    imgHeight:300,   // ( 等比例缩放后的高：200*1199/800 = 300 )
                    magWidth:100,
                    magHeight:100
                }
            })
            return {
                menuData,
                ...toRefs(state)
            }
        }
    }
</script>